<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>move-div</title>
    <style>
        noselect
        {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        html
        {
            width: 100%;
        }
        
        body
        {
            background: no-repeat;
            margin: 0;
            width: 100%;
            font-family: 'Raleway' , sans-serif;
            background-image: url('image/bg.png');
        }
        
        .window
        {
            width: 500px;
            height: 300px;
            background: #181818;
            margin-top: 50px;
            margin-left: -250px;
            left: 50%;
            position: absolute;
        }
        
        .pew
        {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #111;
            background: #f00;
            cursor: default;
        }
        
        .container
        {
            width: 100%;
            height: calc(100% - 30px);
            color: #eee;
            padding: 35px 0 0 0;
            text-align: center;
            font-size: 36px;
        }
    </style>
    <script src='jquery.js'></script>
</head>
<body>
    <div class="share"></div>
    
    <div class="window noselect">
        <div class="pew">
            Header
        </div>
        <div class="container">
        	container
        </div>
    </div>
</body>
	<script>
        var clicked = "Nope.";
        var mausx = 0;
        var mausy = 0;
        var winx = 0;
        var winy = 0;
        var difx = mausx - winx;
        var dify = mausy - winy;

        $("html").mousemove(function (event) {
            mausx = event.pageX;
            mausy = event.pageY;
            winx = $(".window").offset().left;
            winy = $(".window").offset().top;
            if(winx < 0){winx=0;}
            if(winx > 820-500){winx=820-500;}
            if(winy < 0){winy=0;}
            if(winy > 615-300){winy=615-300;}
            if (clicked == "Nope.") {
                difx = mausx - winx;
                dify = mausy - winy;
            }

            var newx = event.pageX - difx - $(".window").css("marginLeft").replace('px', '');
            var newy = event.pageY - dify - $(".window").css("marginTop").replace('px', '');
            $(".window").css({ top: newy, left: newx });

            $(".container").html("Mouse Cords: " + mausx + " , " + mausy + "<br />" 
            	+ "Window Cords:" + winx + " , " + winy + "<br />Draggin'?: " 
            	+ clicked + "<br />Difference: " + difx + " , " + dify + "");
        });

        $(".pew").mousedown(function (event) {
            clicked = "Yeah.";
        });

        $("html").mouseup(function (event) {

            clicked = "Nope.";
        });

    </script>
</html>
